
<template>
	  	<page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>

	<!-- 功能网格布局 -->
	   <view class="function-grid" 
	   :style="{ 
	         gridTemplateColumns: `repeat(${props.count}, 1fr)`,
			 paddingTop:`${props.ptop}`,
			 gap:`${props.gap}`
	       }"
	   >
	        <!-- 使用v-for循环渲染所有grid-item -->
	        <view 
	            class="grid-item" 
				:style="{
					marginBottom:`${props.mbottom}`
				}"
	            v-for="(item, index) in props.gridItems" 
	            :key="index"
				@click="navigationUrl(item)"
	        >
	            <view :class="['grid-icon', item.iconClass]">
	                <text 
	                    class="iconfont grid-iconfont" 
	                    :class="item.iconName"
	                   
	                ></text>
	            </view>
	            <text class="grid-text text12">{{ item.text }}</text>
	        </view>
	    </view>
</template>

<script setup>
	import {defineProps} from "vue"
	import { useFontSizeStore } from '@/stores/fontSizeStore';
		const fontSizeStore = useFontSizeStore();
	
	import {
		useRouter
	} from 'uni-mini-router'
	
	// 路由实例 - 保留原逻辑
	const router = useRouter(); 
	// top="10" bottom="10"
	const props=defineProps(['gridItems','count','ptop','mbottom','gap'])
	
	const navigationUrl=(item)=>{
		if(item.pathName){
	router.push({
			name:item.pathName,
			params:{
				id:item.id,
				name:item.name,
				title:item.text
			}
		})
		}
	
	}
</script>

<style scoped lang="less">
	@import url("@/static/styles/colors.less");
	
 
	
		// 功能网格布局
		.function-grid {
			display: grid;
			box-sizing: border-box;
			// background-color:  @primary-ivory;
		
		
		  .grid-item {
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		    justify-content: center;
		    border-radius: 12px;
			// margin-bottom: 50rpx;
			// border:1rpx solid #e1e1e1;
		    .grid-icon {
		      width: 90rpx;
		      height: 90rpx;
		      border-radius: 12px;
		      display: flex;
		      align-items: center;
		      justify-content: center;
		      margin-bottom: 10px;
		    }
		
		   
		  }
		  
		  .iconfont{
			  color: #fff;
		  }
		  
		  .grid-text{
			  font-size: 1rem;
		  }
		
		  // 不同功能图标颜色
		  .order-icon {
		    background-color: rgba(24, 144, 255, 0.9);
		  }
		
		  .urgent-icon {
		    background-color: rgba(245, 63, 63, 0.9);
		  }
		
		  .dispatch-icon {
		    background-color: rgba(135, 100, 255, 0.9);
		  }
		  
		  .dispatch-down-order{
			background-color: #75a63be6;
			 
		  }
		  
		  .service-icon{
			  background-color: #b236c1;
		  }
		
		  .onsite-icon {
		    background-color: rgba(0, 180, 42, 0.9);
		  }
		
		  .data-icon {
		    background-color: rgba(255, 125, 0, 0.9);
		  }
		
		  .record-icon {
		    background-color: #eb6102e6;
		  }
		}
</style>